<script setup lang="ts">
    import { defineProps, getCurrentInstance, toRefs, ref, reactive, inject } from 'vue';
    import type { FormInstance } from 'element-plus';
    import { Cellphone } from '@element-plus/icons-vue';

    const msg: any = inject('message');
    const internalInstance = getCurrentInstance();
    const checkOldPhoneFormRef = ref<FormInstance>();
    const checkNewPhoneFormRef = ref<FormInstance>();

    // 属性
    let props = defineProps({
        visible: {
            type: Boolean,
            default: false
        }
    });
    let { visible } = toRefs(props);

    // 切换步骤条
    const switchStepObj = reactive({
        oldPhoneSteps: true,
        newPhoneSteps: false
    });
    // 检查旧手机号表单信息
    const checkOldPhoneForm = reactive({
        code: "",
        key: "",
        rules: {
            code: [
                { required: true, message: '验证码不能为空', trigger: 'blur' }
            ]
        }
    });
    // 检查新手机号表单信息
    const checkNewPhoneForm = reactive({
        phone: "",
        code: "",
        rules: {
            code: [
                { required: true, message: '验证码不能为空', trigger: 'blur' }
            ],
            phone: [
                { required: true, message: '手机号不能为空', trigger: 'blur' },
                { required: true, pattern: /^1(3[0-9]|4[5-9]|5[0-35-9]|6[25-9]|7[0-8]|8[0-9]|9[0-9])\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
            ],
        }
    });

    // 下一步事件
    const nextStep = async (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        await formEl.validate((valid) => {
            if (valid) {
                switchStepObj.oldPhoneSteps = false;
                switchStepObj.newPhoneSteps = true;
                // 清空字段值
                formEl.resetFields();
            }
        })
    }
    // 绑定手机号码事件
    const bindPhone = async (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        await formEl.validate((valid) => {
            if (valid) {
                if(internalInstance) {
                    internalInstance.emit("close");
                }
                msg.success("修改成功");
                // 清空字段值
                formEl.resetFields();
            }
        })
    }

</script>
<template>
    <el-dialog v-model="visible" title="绑定手机" width="320" draggable :lock-scroll="false" :close-on-click-modal="false">
        <div class="steps-bar" v-show="switchStepObj.oldPhoneSteps">
            <el-form :model="checkOldPhoneForm" :rules="checkOldPhoneForm.rules" ref="checkOldPhoneFormRef" class="from-box">
                <el-form-item prop="code">
                    <div class="old_phone">
                        <span>原手机号：</span>176****6720
                    </div>
                    <el-input
                        placeholder="请输入验证码"
                        maxlength='4'
                        v-model="checkOldPhoneForm.code" 
                        autocomplete="off"
                        size="large"
                    >
                        <template #prefix>
                            <svg-icon href="#icon-code" width="14px" height="14px" fill="#a8abb2"></svg-icon>
                        </template>
                        <template #suffix>
                            <el-button class="code-text" type="primary" link>点击发送</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button style="width: 100%;" type="primary" @click="nextStep(checkOldPhoneFormRef)">下一步</el-button>
        </div>
        <div class="steps-bar" v-show="switchStepObj.newPhoneSteps">
            <el-form :model="checkNewPhoneForm" :rules="checkNewPhoneForm.rules" ref="checkNewPhoneFormRef" class="from-box">
                <el-form-item prop="phone">
                    <el-input placeholder="请输入新的手机号码" :prefix-icon="Cellphone" v-model="checkNewPhoneForm.phone" size="large"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input
                        placeholder="请输入验证码"
                        maxlength='4'
                        v-model="checkNewPhoneForm.code" 
                        autocomplete="off"
                        size="large"
                    >
                        <template #prefix>
                            <svg-icon href="#icon-code" width="14px" height="14px" fill="#a8abb2"></svg-icon>
                        </template>
                        <template #suffix>
                            <el-button class="code-text" type="primary" link>点击发送</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button style="width: 100%;" type="primary" @click="bindPhone(checkNewPhoneFormRef)">提      交</el-button>
        </div>
    </el-dialog>
</template>
<style lang="css" scoped>
    .old_phone {
        padding: 0 0 5px 0;
        font-weight: bold;
        color: #999;
    }

    .code-text {
        color: #0084ff;
    }
</style>